<script setup>
import {NButton, NButtonGroup, NIcon, NSpace, useMessage, NInput, NModal} from 'naive-ui';
import {Edit, Play, Stop, InternetExplorer, TrashAltRegular} from '@vicons/fa';
import {ref, onMounted} from "vue";
import {subEvent, pubEvent} from "../api/event.js";
import {SetProxyAddr, GetProxyAddr, StartProxy, StopProxy, SetSystemProxy, UnsetSystemProxy, IsSystemProxyEnabled, SetProtocolFilter, SetContentTypeFilter} from "../../wailsjs/go/proxy/Proxy.js";

const message = useMessage()
let started = ref(false)
let addr = ref('')
let showEditModal = ref(false)
let tempAddr = ref('')
const systemProxyEnabled = ref(false)
const selectedProtocols = ref(['HTTP', 'HTTPS', 'WebSocket'])
const selectedContentTypes = ref(['JSON', 'Form', 'XML'])

onMounted(async () => {
  try {
    addr.value = await GetProxyAddr()
    systemProxyEnabled.value = await IsSystemProxyEnabled()
  } catch (err) {
    message.error('获取地址失败：' + err)
  }
})

subEvent("proxy_start", (e) => {
  message.info(e);
  started.value = true
});
subEvent("proxy_stop", (e) => {
  message.info(e);
  started.value = false
});

function openEditModal() {
  tempAddr.value = addr.value
  showEditModal.value = true
}

async function confirmEdit() {
  try {
    await SetProxyAddr(tempAddr.value)
    addr.value = tempAddr.value
    showEditModal.value = false
  } catch (err) {
    message.error('修改地址失败：' + err)
  }
}

const toggleSystemProxy = async () => {
  try {
    if (systemProxyEnabled.value) {
      await UnsetSystemProxy()
      message.success('系统代理已关闭')
      systemProxyEnabled.value = false
    } else {
      await SetSystemProxy()
      message.success('系统代理已开启')
      systemProxyEnabled.value = true
    }
  } catch (error) {
    message.error(`切换系统代理失败: ${error}`)
  }
}

const toggleProtocolFilter = async (protocol) => {
  const index = selectedProtocols.value.indexOf(protocol)
  if (index === -1) {
    selectedProtocols.value.push(protocol)
  } else {
    selectedProtocols.value.splice(index, 1)
  }
  try {
    await SetProtocolFilter(selectedProtocols.value)
  } catch (err) {
    message.error('设置协议过滤失败：' + err)
  }
}

const toggleContentTypeFilter = async (type) => {
  const index = selectedContentTypes.value.indexOf(type)
  if (index === -1) {
    selectedContentTypes.value.push(type)
  } else {
    selectedContentTypes.value.splice(index, 1)
  }
  try {
    await SetContentTypeFilter(selectedContentTypes.value)
  } catch (err) {
    message.error('设置内容类型过滤失败：' + err)
  }
}

const handleClear = () => {
  pubEvent('clear-table-data');
  message.success('已清除所有记录');
}
</script>

<template>
  <n-space>
    <div></div>
    <n-button v-if="!started" text class="text-2xl p-1 text-blue-500" @click="StartProxy">
      <n-icon>
        <Play/>
      </n-icon>
    </n-button>
    <n-button v-if="started" text class="text-2xl p-1 text-red-500" @click="StopProxy">
      <n-icon>
        <Stop/>
      </n-icon>
    </n-button>
    <n-space size="small" class="text-xl p-1">
      <span>{{ addr }}</span>
      <n-button text class="text-xl p-1" @click="openEditModal">
        <n-icon >
          <Edit/>
        </n-icon>
      </n-button>
      <n-button text class="text-xl p-1" @click="toggleSystemProxy">
        <n-icon :color="systemProxyEnabled ? '#0e7a0d' : undefined">
          <InternetExplorer/>
        </n-icon>
      </n-button>
    </n-space>
    <n-button-group size="small">
      <n-button :type="selectedProtocols.length === 3 ? 'primary' : ''" 
                @click="selectedProtocols = ['HTTP', 'HTTPS', 'WebSocket']">
        全部
      </n-button>
      <n-button :type="selectedProtocols.includes('HTTP') ? 'primary' : ''" 
                @click="toggleProtocolFilter('HTTP')">
        HTTP
      </n-button>
      <n-button :type="selectedProtocols.includes('HTTPS') ? 'primary' : ''" 
                @click="toggleProtocolFilter('HTTPS')">
        HTTPS
      </n-button>
      <n-button :type="selectedProtocols.includes('WebSocket') ? 'primary' : ''" 
                @click="toggleProtocolFilter('WebSocket')">
        WebSocket
      </n-button>
    </n-button-group>

    <n-button-group size="small">
      <n-button :type="selectedContentTypes.includes('JSON') ? 'primary' : ''" 
                @click="toggleContentTypeFilter('JSON')">
        JSON
      </n-button>
      <n-button :type="selectedContentTypes.includes('Form') ? 'primary' : ''" 
                @click="toggleContentTypeFilter('Form')">
        Form
      </n-button>
      <n-button :type="selectedContentTypes.includes('XML') ? 'primary' : ''" 
                @click="toggleContentTypeFilter('XML')">
        XML
      </n-button>
    </n-button-group>

    <n-button text class="text-xl p-1" @click="handleClear">
      <n-icon>
        <TrashAltRegular/>
      </n-icon>
    </n-button>
  </n-space>

  <!-- 添加编辑地址的模态框 -->
  <n-modal
      v-model:show="showEditModal"
      preset="dialog"
      title="修改监听地址"
      positive-text="确认"
      negative-text="取消"
      @positive-click="confirmEdit"
      @negative-click="showEditModal = false"
  >
    <n-input v-model:value="tempAddr" placeholder="请输入监听地址 (例如: :8888)"/>
  </n-modal>
</template>

<style scoped>
.head-bar {
  /* ... 现有样式 ... */
}

.right {
  display: flex;
  gap: 8px;  /* 按钮之间的间距 */
  align-items: center;
}
</style>